<template>
  <div class="admin-activity-content">
    <div class="page-header">
      <h2>活动中心内容管理</h2>
      <div class="header-actions">
        <el-button @click="handlePreview">
          <el-icon><View /></el-icon>
          预览效果
        </el-button>
      </div>
    </div>

    <!-- 内容管理标签页 -->
    <el-tabs v-model="activeTab" type="border-card" class="content-tabs">
      <!-- 其他活动 -->
      <el-tab-pane label="其他活动" name="activity-overview">
        <div class="tab-content">
          <div class="list-header">
            <h3>其他活动列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('activity-overview')"
              >
                <el-icon><Plus /></el-icon>
                新增其他活动
              </el-button>
              <el-button @click="exportTabData('activity-overview')"
                >导出</el-button
              >
            </div>
          </div>

          <el-table
            :data="getPageList('activity-overview')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, "subtitle") }}
              </template>
            </el-table-column> -->
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span
                  class="content-preview"
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{
                    stripHtml(getContentField(scope.row, "content")).substring(
                      0,
                      20
                    )
                  }}{{
                    stripHtml(getContentField(scope.row, "content")).length > 20
                      ? "..."
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="backgroundImage"
              label="背景图片"
              width="100"
            >
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="getContentField(scope.row, 'backgroundImage')"
                    :src="getContentField(scope.row, 'backgroundImage')"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="getContentField(scope.row, 'videoUrl')"
                  :href="getContentField(scope.row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="scope.row.linkUrl"
                  :href="scope.row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'active' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "active" ? "启用" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag
                  v-if="getContentField(scope.row, 'isFeatured')"
                  type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="活动时间" width="150">
              <template #default="scope">
                {{ scope.row.activeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePageItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 技术交流会 -->
      <el-tab-pane label="技术交流会" name="tech-exchange">
        <div class="tab-content">
          <div class="list-header">
            <h3>技术交流会列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('tech-exchange')"
              >
                <el-icon><Plus /></el-icon>
                新增技术交流会
              </el-button>
              <el-button @click="exportTabData('tech-exchange')"
                >导出</el-button
              >
            </div>
          </div>

          <el-table
            :data="getPageList('tech-exchange')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, "subtitle") }}
              </template>
            </el-table-column> -->
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span
                  class="content-preview"
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{
                    stripHtml(getContentField(scope.row, "content")).substring(
                      0,
                      20
                    )
                  }}{{
                    stripHtml(getContentField(scope.row, "content")).length > 20
                      ? "..."
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="backgroundImage"
              label="背景图片"
              width="100"
            >
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="getContentField(scope.row, 'backgroundImage')"
                    :src="getContentField(scope.row, 'backgroundImage')"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="getContentField(scope.row, 'videoUrl')"
                  :href="getContentField(scope.row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="scope.row.linkUrl"
                  :href="scope.row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'active' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "active" ? "启用" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag
                  v-if="getContentField(scope.row, 'isFeatured')"
                  type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="活动时间" width="150">
              <template #default="scope">
                {{ scope.row.activeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePageItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 商务对接会 -->
      <el-tab-pane label="商务对接会" name="business-matching">
        <div class="tab-content">
          <div class="list-header">
            <h3>商务对接会列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('business-matching')"
              >
                <el-icon><Plus /></el-icon>
                新增商务对接会
              </el-button>
              <el-button @click="exportTabData('business-matching')"
                >导出</el-button
              >
            </div>
          </div>

          <el-table
            :data="getPageList('business-matching')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, "subtitle") }}
              </template>
            </el-table-column> -->
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span
                  class="content-preview"
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{
                    stripHtml(getContentField(scope.row, "content")).substring(
                      0,
                      20
                    )
                  }}{{
                    stripHtml(getContentField(scope.row, "content")).length > 20
                      ? "..."
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="backgroundImage"
              label="背景图片"
              width="100"
            >
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="getContentField(scope.row, 'backgroundImage')"
                    :src="getContentField(scope.row, 'backgroundImage')"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="getContentField(scope.row, 'videoUrl')"
                  :href="getContentField(scope.row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="scope.row.linkUrl"
                  :href="scope.row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'active' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "active" ? "启用" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag
                  v-if="getContentField(scope.row, 'isFeatured')"
                  type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="活动时间" width="150">
              <template #default="scope">
                {{ scope.row.activeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePageItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 产品发布会 -->
      <el-tab-pane label="产品发布会" name="product-release">
        <div class="tab-content">
          <div class="list-header">
            <h3>产品发布会列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('product-release')"
              >
                <el-icon><Plus /></el-icon>
                新增产品发布会
              </el-button>
              <el-button @click="exportTabData('product-release')"
                >导出</el-button
              >
            </div>
          </div>

          <el-table
            :data="getPageList('product-release')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, "subtitle") }}
              </template>
            </el-table-column> -->
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span
                  class="content-preview"
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{
                    stripHtml(getContentField(scope.row, "content")).substring(
                      0,
                      20
                    )
                  }}{{
                    stripHtml(getContentField(scope.row, "content")).length > 20
                      ? "..."
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="backgroundImage"
              label="背景图片"
              width="100"
            >
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="getContentField(scope.row, 'backgroundImage')"
                    :src="getContentField(scope.row, 'backgroundImage')"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="getContentField(scope.row, 'videoUrl')"
                  :href="getContentField(scope.row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="scope.row.linkUrl"
                  :href="scope.row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'active' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "active" ? "启用" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag
                  v-if="getContentField(scope.row, 'isFeatured')"
                  type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="活动时间" width="150">
              <template #default="scope">
                {{ scope.row.activeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePageItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 行业论坛 -->
      <el-tab-pane label="行业论坛" name="industry-forum">
        <div class="tab-content">
          <div class="list-header">
            <h3>行业论坛列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('industry-forum')"
              >
                <el-icon><Plus /></el-icon>
                新增行业论坛
              </el-button>
              <el-button @click="exportTabData('industry-forum')"
                >导出</el-button
              >
            </div>
          </div>

          <el-table
            :data="getPageList('industry-forum')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, "subtitle") }}
              </template>
            </el-table-column> -->
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span
                  class="content-preview"
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{
                    stripHtml(getContentField(scope.row, "content")).substring(
                      0,
                      20
                    )
                  }}{{
                    stripHtml(getContentField(scope.row, "content")).length > 20
                      ? "..."
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="scope.row.imageUrl"
                    :src="scope.row.imageUrl"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="backgroundImage"
              label="背景图片"
              width="100"
            >
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img
                    v-if="getContentField(scope.row, 'backgroundImage')"
                    :src="getContentField(scope.row, 'backgroundImage')"
                    class="table-image"
                  />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="getContentField(scope.row, 'videoUrl')"
                  :href="getContentField(scope.row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link
                  v-if="scope.row.linkUrl"
                  :href="scope.row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === 'active' ? 'success' : 'info'"
                >
                  {{ scope.row.status === "active" ? "启用" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag
                  v-if="getContentField(scope.row, 'isFeatured')"
                  type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="活动时间" width="150">
              <template #default="scope">
                {{ scope.row.activeTime }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePageItem(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 活动日历 -->
      <!-- <el-tab-pane label="活动日历" name="activity-calendar">
        <div class="tab-content">
          <div class="list-header">
            <h3>活动日历列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px;"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px;"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button type="primary" size="small" @click="showAddDialog('activity-calendar')">
                <el-icon><Plus /></el-icon>
                新增活动日历
              </el-button>
            </div>
          </div>
          
          <el-table :data="getPageList('activity-calendar')" v-loading="loading" stripe>
            <el-table-column prop="title" label="标题" min-width="200" />
            <el-table-column prop="subtitle" label="副标题" min-width="150">
              <template #default="scope">
                {{ getContentField(scope.row, 'subtitle') }}
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" min-width="150">
              <template #default="scope">
                <span 
                  class="content-preview" 
                  @click="previewContent(scope.row)"
                  :title="stripHtml(getContentField(scope.row, 'content'))"
                >
                  {{ stripHtml(getContentField(scope.row, 'content')).substring(0, 20) }}{{ stripHtml(getContentField(scope.row, 'content')).length > 20 ? '...' : '' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="主图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" class="table-image" />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="backgroundImage" label="背景图片" width="100">
              <template #default="scope">
                <div class="image-container" @click="previewImages(scope.row)">
                  <img v-if="getContentField(scope.row, 'backgroundImage')" :src="getContentField(scope.row, 'backgroundImage')" class="table-image" />
                  <span v-else class="no-image">无图片</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="videoUrl" label="视频链接" width="100">
              <template #default="scope">
                <el-link v-if="getContentField(scope.row, 'videoUrl')" :href="getContentField(scope.row, 'videoUrl')" target="_blank" type="primary">
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="外部链接" width="100">
              <template #default="scope">
                <el-link v-if="scope.row.linkUrl" :href="scope.row.linkUrl" target="_blank" type="primary">
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                  {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="isFeatured" label="推荐" width="80">
              <template #default="scope">
                <el-tag v-if="getContentField(scope.row, 'isFeatured')" type="warning">推荐</el-tag>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="150" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="editPageItem(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="deletePageItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane> -->

      <!-- 轮播图管理 -->
      <el-tab-pane label="轮播图管理" name="carousel">
        <div class="tab-content">
          <CarouselManager
            title="活动中心轮播图管理"
            module-type="activities"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="dialogTitle"
      width="90%"
      :before-close="handleCloseEditDialog"
      class="edit-dialog"
    >
      <div class="edit-content">
        <el-form
          :model="editForm"
          label-width="120px"
          :rules="editRules"
          ref="editFormRef"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="页面标题" prop="title">
                <el-input
                  v-model="editForm.title"
                  placeholder="请输入页面标题"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="页面类型" prop="pageType">
                <el-select
                  v-model="editForm.pageType"
                  placeholder="请选择页面类型"
                  style="width: 100%"
                >
                  <el-option label="其他活动" value="activity-overview" />
                  <el-option label="技术交流会" value="tech-exchange" />
                  <el-option label="商务对接会" value="business-matching" />
                  <el-option label="产品发布会" value="product-release" />
                  <el-option label="行业论坛" value="industry-forum" />
                  <el-option label="活动日历" value="activity-calendar" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item label="页面副标题">
            <el-input
              v-model="editForm.subtitle"
              placeholder="请输入页面副标题（可选）"
              maxlength="200"
              show-word-limit
            />
          </el-form-item> -->

          <el-form-item label="页面描述">
            <el-input
              v-model="editForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入页面描述（可选）"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="页面内容" prop="content">
            <RichTextEditor v-model="editForm.content" />
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="页面图片">
                <div class="image-upload-container">
                  <el-upload
                    class="image-uploader"
                    :action="uploadAction"
                    :headers="uploadHeaders"
                    :data="{ type: 'subpage' }"
                    :show-file-list="false"
                    :on-success="
                      (response) => handleImageSuccess(response, 'imageUrl')
                    "
                    :before-upload="beforeImageUpload"
                    accept="image/*"
                  >
                    <img
                      v-if="editForm.imageUrl"
                      :src="editForm.imageUrl"
                      class="uploaded-image"
                    />
                    <el-icon v-else class="image-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                  <el-input
                    v-model="editForm.imageUrl"
                    placeholder="或直接输入图片URL"
                    style="margin-top: 10px"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="背景图片">
                <div class="image-upload-container">
                  <el-upload
                    class="image-uploader"
                    :action="uploadAction"
                    :headers="uploadHeaders"
                    :data="{ type: 'subpage' }"
                    :show-file-list="false"
                    :on-success="
                      (response) =>
                        handleImageSuccess(response, 'backgroundImage')
                    "
                    :before-upload="beforeImageUpload"
                    accept="image/*"
                  >
                    <img
                      v-if="editForm.backgroundImage"
                      :src="editForm.backgroundImage"
                      class="uploaded-image"
                    />
                    <el-icon v-else class="image-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                  <el-input
                    v-model="editForm.backgroundImage"
                    placeholder="或直接输入背景图片URL"
                    style="margin-top: 10px"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="链接地址">
                <el-input
                  v-model="editForm.linkUrl"
                  placeholder="请输入链接地址（可选）"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="视频链接">
                <el-input
                  v-model="editForm.videoUrl"
                  placeholder="请输入视频链接（可选）"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="活动时间">
            <el-date-picker
              v-model="editForm.activeTime"
              type="date"
              placeholder="请选择活动日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="排序">
                <el-input-number
                  v-model="editForm.sortOrder"
                  :min="0"
                  :max="999"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <el-radio-group v-model="editForm.status">
                  <el-radio label="active">启用</el-radio>
                  <el-radio label="inactive">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否推荐">
                <el-switch v-model="editForm.isFeatured" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
          <el-button type="success" @click="previewPage">预览页面</el-button>
          <el-button type="primary" @click="savePageContent" :loading="saving"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { subpageApi as adminSubpageApi } from "@/api/admin";
import { subpageApi as siteSubpageApi } from "@/api/user";
import { Check, View, Edit, Plus, Search } from "@element-plus/icons-vue";
import RichTextEditor from "@/components/RichTextEditor.vue";
import config from "@/config";
import CarouselManager from "@/components/admin/CarouselManager.vue";
import { useExcelExport } from "@/hooks/useExcelExport";

export default {
  name: "AdminActivityContent",
  components: {
    Check,
    View,
    Edit,
    Plus,
    Search,
    RichTextEditor,
    CarouselManager,
  },
  setup() {
    // 使用导出功能
    const { exportListData, mapperPresets, columnWidthPresets } =
      useExcelExport();

    const loading = ref(false);
    const saving = ref(false);
    const activeTab = ref("activity-overview");
    const editDialogVisible = ref(false);
    const currentPageKey = ref("");
    const currentPageTitle = ref("");
    const isEditMode = ref(false);
    const editFormRef = ref(null);

    // 搜索和筛选
    const searchText = ref("");
    const statusFilter = ref("");

    // 页面数据存储 - 改为数组形式
    const pageData = reactive({
      "activity-overview": [],
      "tech-exchange": [],
      "business-matching": [],
      "product-release": [],
      "industry-forum": [],
      "activity-calendar": [],
    });

    // 编辑表单
    const editForm = reactive({
      id: null,
      title: "",
      subtitle: "",
      description: "",
      content: "",
      pageType: "",
      imageUrl: "",
      backgroundImage: "",
      videoUrl: "",
      linkUrl: "",
      activeTime: "",
      sortOrder: 0,
      status: "active",
      isFeatured: false,
    });

    // 表单验证规则
    const editRules = reactive({
      title: [
        { required: true, message: "请输入页面标题", trigger: "blur" },
        {
          min: 2,
          max: 100,
          message: "标题长度在 2 到 100 个字符",
          trigger: "blur",
        },
      ],
      pageType: [
        { required: true, message: "请选择页面类型", trigger: "change" },
      ],
      content: [{ required: true, message: "请输入页面内容", trigger: "blur" }],
    });

    // 表单默认值
    const defaultForm = {
      id: null,
      title: "",
      subtitle: "",
      description: "",
      content: "",
      pageType: "",
      imageUrl: "",
      backgroundImage: "",
      videoUrl: "",
      linkUrl: "",
      activeTime: "",
      sortOrder: 0,
      status: "active",
      isFeatured: false,
    };

    // 上传配置
    const apiConfig = config.getApiConfig();
    const uploadAction = ref(`${apiConfig.baseURL}/api/upload/image`);
    const videoUploadAction = ref(`${apiConfig.baseURL}/api/upload/video`);
    const uploadHeaders = ref({
      token: localStorage.getItem("adminToken") || "",
    });
    const videoUploading = ref(false);

    // 对话框标题
    const dialogTitle = computed(() => {
      return isEditMode.value
        ? `编辑页面 - ${currentPageTitle.value}`
        : "新增页面";
    });

    // 获取页面数据列表（带搜索和筛选）
    const getPageList = (pageKey) => {
      let list = pageData[pageKey] || [];

      // 搜索筛选
      if (searchText.value) {
        const searchLower = searchText.value.toLowerCase();
        list = list.filter(
          (item) =>
            item.title.toLowerCase().includes(searchLower) ||
            getContentField(item, "description")
              .toLowerCase()
              .includes(searchLower) ||
            getContentField(item, "subtitle")
              .toLowerCase()
              .includes(searchLower)
        );
      }

      // 状态筛选
      if (statusFilter.value) {
        list = list.filter((item) => item.status === statusFilter.value);
      }

      return list;
    };

    // 获取页面数据（单个）
    const getPageData = (pageKey) => {
      return pageData[pageKey] || {};
    };

    // 获取content字段中的特定字段
    const getContentField = (row, field) => {
      if (!row.content) return "";

      // 如果content是纯文本，直接返回
      if (
        typeof row.content === "string" &&
        !row.content.trim().startsWith("{") &&
        !row.content.trim().startsWith("[")
      ) {
        // 如果是请求content字段本身，返回纯文本
        if (field === "content") {
          return row.content;
        }
        // 其他字段在纯文本情况下返回空
        return "";
      }

      try {
        const contentData =
          typeof row.content === "string"
            ? JSON.parse(row.content)
            : row.content;
        const value = contentData[field];
        // 对于布尔值，直接返回
        if (typeof value === "boolean") {
          return value;
        }
        // 对于字符串，返回字符串值
        return value || "";
      } catch (e) {
        // 如果JSON解析失败，说明是纯文本
        if (field === "content") {
          return row.content;
        }
        return "";
      }
    };

    // 加载所有页面数据
    const loadAllPageData = async () => {
      const pageKeys = [
        "activity-overview",
        "tech-exchange",
        "business-matching",
        "product-release",
        "industry-forum",
        "activity-calendar",
      ];

      for (const pageKey of pageKeys) {
        try {
          const response = await adminSubpageApi.getSubpageList(
            "activities",
            pageKey
          );
          if (response && response.code === "200" && response.data) {
            pageData[pageKey] = response.data || [];
          } else {
            // 如果没有数据，使用模拟数据
            pageData[pageKey] = getMockData(pageKey);
          }
        } catch (error) {
          console.error(`加载${pageKey}数据失败:`, error);
          // 使用模拟数据
          pageData[pageKey] = getMockData(pageKey);
        }
      }
    };

    // 获取模拟数据
    const getMockData = (pageKey) => {
      const mockData = {
        "activity-overview": [
          {
            id: 1,
            pageKey: "activities",
            sectionKey: "activity-overview",
            title: "展会期间精彩活动",
            content: JSON.stringify({
              subtitle: "创新科技，引领未来",
              description: "展示最新的科技产品和创新解决方案",
              content:
                "<p>FAIR plus 2025展会期间将举办多场精彩活动，包括技术交流会、商务对接会、产品发布会等，为展商和观众提供更多交流合作机会。</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/3498DB/FFFFFF?text=Overview+BG",
              videoUrl: "",
              isFeatured: true,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/3498DB/FFFFFF?text=Overview",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "tech-exchange": [
          {
            id: 2,
            pageKey: "activities",
            sectionKey: "tech-exchange",
            title: "机器人技术交流会",
            content: JSON.stringify({
              subtitle: "技术前沿",
              description: "探讨机器人技术的最新发展趋势",
              content:
                "<p>本次技术交流会将邀请行业专家，深入探讨机器人技术的最新发展趋势和应用前景...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/E74C3C/FFFFFF?text=Tech+BG",
              videoUrl: "",
              isFeatured: false,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/E74C3C/FFFFFF?text=Tech",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "business-matching": [
          {
            id: 3,
            pageKey: "activities",
            sectionKey: "business-matching",
            title: "精准对接，创造商机",
            content: JSON.stringify({
              subtitle: "商务对接",
              description: "为展商和观众提供精准的商务对接服务",
              content:
                "<p>为展商和观众提供精准的商务对接服务，促进产业合作和商业机会的创造...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/2ECC71/FFFFFF?text=Business+BG",
              videoUrl: "",
              isFeatured: false,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/2ECC71/FFFFFF?text=Business",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "product-release": [
          {
            id: 4,
            pageKey: "activities",
            sectionKey: "product-release",
            title: "新产品发布会",
            content: JSON.stringify({
              subtitle: "产品发布",
              description: "展示最新的产品和技术创新",
              content:
                "<p>本次产品发布会将展示最新的产品和技术创新，为行业带来新的发展机遇...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/F39C12/FFFFFF?text=Product+BG",
              videoUrl: "",
              isFeatured: true,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/F39C12/FFFFFF?text=Product",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "industry-forum": [
          {
            id: 5,
            pageKey: "activities",
            sectionKey: "industry-forum",
            title: "行业发展趋势论坛",
            content: JSON.stringify({
              subtitle: "行业论坛",
              description: "探讨行业发展趋势和未来方向",
              content:
                "<p>本次行业论坛将邀请行业领袖和专家，深入探讨行业发展趋势和未来方向...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/9B59B6/FFFFFF?text=Forum+BG",
              videoUrl: "",
              isFeatured: false,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/9B59B6/FFFFFF?text=Forum",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "activity-calendar": [
          {
            id: 6,
            pageKey: "activities",
            sectionKey: "activity-calendar",
            title: "活动日历",
            content: JSON.stringify({
              subtitle: "活动安排",
              description: "查看展会期间的所有活动安排",
              content:
                "<p>查看展会期间的所有活动安排，合理安排您的参观时间...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/34495E/FFFFFF?text=Calendar+BG",
              videoUrl: "",
              isFeatured: false,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/34495E/FFFFFF?text=Calendar",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
      };
      return mockData[pageKey] || [];
    };

    // 显示新增对话框
    const showAddDialog = (pageType) => {
      isEditMode.value = false;
      currentPageKey.value = pageType;
      currentPageTitle.value = getPageTypeName(pageType);
      Object.assign(editForm, { ...defaultForm, pageType });
      editDialogVisible.value = true;
    };

    // 获取页面类型名称
    const getPageTypeName = (pageType) => {
      const typeNames = {
        "activity-overview": "其他活动",
        "tech-exchange": "技术交流会",
        "business-matching": "商务对接会",
        "product-release": "产品发布会",
        "industry-forum": "行业论坛",
        "activity-calendar": "活动日历",
      };
      return typeNames[pageType] || pageType;
    };

    // 编辑页面项
    const editPageItem = (item) => {
      isEditMode.value = true;
      currentPageKey.value = item.pageType || activeTab.value;
      currentPageTitle.value =
        item.title || getPageTypeName(currentPageKey.value);

      // 解析content字段中的JSON数据
      let parsedContent = {};
      if (item.content) {
        try {
          parsedContent =
            typeof item.content === "string"
              ? JSON.parse(item.content)
              : item.content;
        } catch (e) {
          // 如果解析失败，将content作为纯文本处理
          parsedContent = { content: item.content };
        }
      }

      Object.assign(editForm, {
        id: item.id || null,
        title: item.title || "",
        subtitle: item.subtitle || parsedContent.subtitle || "",
        description: item.description || parsedContent.description || "",
        content: parsedContent.content || item.content || "",
        pageType: item.pageType || activeTab.value,
        imageUrl: item.imageUrl || parsedContent.imageUrl || "",
        backgroundImage:
          item.backgroundImage || parsedContent.backgroundImage || "",
        videoUrl: item.videoUrl || parsedContent.videoUrl || "",
        linkUrl: item.linkUrl || parsedContent.linkUrl || "",
        activeTime: item.activeTime || parsedContent.activeTime || "",
        sortOrder: item.sortOrder || 0,
        status: item.status || "active",
        isFeatured: item.isFeatured || false,
      });

      editDialogVisible.value = true;
    };

    // 删除页面项
    const deletePageItem = async (item) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除"${item.title}"吗？`,
          "确认删除",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        // 调用API删除
        if (item.id) {
          await adminSubpageApi.deleteSubpage(item.id);
        }

        // 从本地数据中移除
        const pageKey = item.pageType || activeTab.value;
        const index = pageData[pageKey].findIndex((p) => p.id === item.id);
        if (index > -1) {
          pageData[pageKey].splice(index, 1);
        }

        ElMessage.success("删除成功");
      } catch (error) {
        if (error !== "cancel") {
          ElMessage.error("删除失败: " + (error.message || "未知错误"));
        }
      }
    };

    // 保存页面内容
    const savePageContent = async () => {
      // 表单验证
      if (editFormRef.value) {
        const valid = await editFormRef.value.validate().catch(() => false);
        if (!valid) {
          ElMessage.error("请检查表单填写是否正确");
          return;
        }
      }

      saving.value = true;
      try {
        // 构建content字段的JSON数据
        const contentData = {
          content: editForm.content,
          subtitle: editForm.subtitle,
          description: editForm.description,
          backgroundImage: editForm.backgroundImage,
          videoUrl: editForm.videoUrl,
          activeTime: editForm.activeTime,
          isFeatured: editForm.isFeatured,
        };

        const formData = {
          pageKey: "activities",
          sectionKey: isEditMode.value
            ? currentPageKey.value
            : editForm.pageType,
          title: editForm.title,
          content: JSON.stringify(contentData),
          imageUrl: editForm.imageUrl,
          linkUrl: editForm.linkUrl,
          sortOrder: editForm.sortOrder,
          status: editForm.status,
        };

        if (isEditMode.value && editForm.id) {
          formData.id = editForm.id;
          await adminSubpageApi.updateSubpage(formData);
        } else {
          await adminSubpageApi.addSubpage(formData);
        }

        // 更新本地数据
        const pageKey = editForm.pageType;
        const newItem = {
          ...formData,
          subtitle: editForm.subtitle,
          description: editForm.description,
          backgroundImage: editForm.backgroundImage,
          videoUrl: editForm.videoUrl,
          activeTime: editForm.activeTime,
          isFeatured: editForm.isFeatured,
          createdAt: isEditMode.value
            ? pageData[pageKey].find((item) => item.id === editForm.id)
                ?.createdAt || new Date().toISOString()
            : new Date().toISOString(),
        };

        if (isEditMode.value && editForm.id) {
          // 更新现有项
          const index = pageData[pageKey].findIndex(
            (item) => item.id === editForm.id
          );
          if (index > -1) {
            pageData[pageKey][index] = newItem;
          }
        } else {
          // 添加新项
          newItem.id = Date.now(); // 临时ID，实际应该从API返回
          pageData[pageKey].push(newItem);
        }

        editDialogVisible.value = false;
        ElMessage.success(isEditMode.value ? "更新成功" : "新增成功");

        // 重新加载数据以确保数据同步
        await loadAllPageData();
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 预览页面
    const previewPage = () => {
      if (editForm.title) {
        ElMessageBox.alert(
          `<h3>${editForm.title}</h3><p>${editForm.subtitle || ""}</p><div>${
            editForm.content
          }</div>`,
          "页面预览",
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "关闭",
          }
        );
      } else {
        ElMessage.warning("请先填写页面标题");
      }
    };

    // 预览效果
    const handlePreview = () => {
      window.open("/activities", "_blank");
    };

    // 关闭编辑对话框
    const handleCloseEditDialog = () => {
      editDialogVisible.value = false;
    };

    // 图片上传成功处理
    const handleImageSuccess = (response, field = "imageUrl") => {
      if (response && (response.code === "200" || response.code === 200)) {
        editForm[field] = response.data.url;
        ElMessage.success("图片上传成功!");
      } else {
        ElMessage.error("图片上传失败!");
      }
    };

    // 视频上传成功处理
    const handleVideoSuccess = (response) => {
      videoUploading.value = false;
      if (response && (response.code === "200" || response.code === 200)) {
        editForm.videoUrl = response.data.url;
        ElMessage.success("视频上传成功!");
      } else {
        ElMessage.error("视频上传失败!");
      }
    };

    // 视频上传前验证
    const beforeVideoUpload = (file) => {
      const isVideo = file.type.startsWith("video/");
      const isLt50M = file.size / 1024 / 1024 < 50;

      if (!isVideo) {
        ElMessage.error("只能上传视频文件!");
        return false;
      }
      if (!isLt50M) {
        ElMessage.error("视频大小不能超过 50MB!");
        return false;
      }
      videoUploading.value = true;
      return true;
    };

    // 图片上传前验证
    const beforeImageUpload = (file) => {
      const isImage = file.type.startsWith("image/");
      const isLt5M = file.size / 1024 / 1024 < 15;

      if (!isImage) {
        ElMessage.error("只能上传图片文件!");
        return false;
      }
      if (!isLt5M) {
        ElMessage.error("图片大小不能超过 15MB!");
        return false;
      }
      return true;
    };

    // 重置表单
    const resetForm = () => {
      Object.assign(editForm, { ...defaultForm, pageType: editForm.pageType });
    };

    // 搜索处理
    const handleSearch = () => {
      // 搜索逻辑已在getPageList中实现
    };

    // 筛选处理
    const handleFilter = () => {
      // 筛选逻辑已在getPageList中实现
    };

    // 预览图片
    const previewImages = (row) => {
      const images = [];
      if (row.imageUrl) {
        images.push(row.imageUrl);
      }
      const backgroundImage = getContentField(row, "backgroundImage");
      if (backgroundImage) {
        images.push(backgroundImage);
      }

      if (images.length > 0) {
        ElMessageBox.alert(
          `<div style="text-align: center;">
            ${images
              .map(
                (img) =>
                  `<img src="${img}" style="max-width: 100%; max-height: 400px; margin: 10px; border-radius: 8px;" />`
              )
              .join("")}
          </div>`,
          `图片预览 - ${row.title}`,
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "关闭",
            customClass: "image-preview-dialog",
          }
        );
      }
    };

    // 预览内容
    const previewContent = (row) => {
      const content = getContentField(row, "content");
      if (content) {
        ElMessageBox.alert(content, `预览内容 - ${row.title}`, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "关闭",
          customClass: "content-preview-dialog",
        });
      } else {
        ElMessage.info("暂无内容可预览");
      }
    };

    // 去除HTML标签
    const stripHtml = (html) => {
      if (!html) return "";
      const tmp = document.createElement("div");
      tmp.innerHTML = html;
      return tmp.textContent || tmp.innerText || "";
    };

    // 导出标签页数据
    const exportTabData = async (tabKey) => {
      // 获取数据的函数
      const fetchData = async () => {
        return getPageList(tabKey);
      };

      // 数据映射函数
      const mapData = (item) => ({
        ID: mapperPresets.handleEmpty(item.id),
        标题: mapperPresets.handleEmpty(item.title),
        副标题: mapperPresets.handleEmpty(getContentField(item, "subtitle")),
        描述: mapperPresets.handleEmpty(getContentField(item, "description")),
        页面类型: mapperPresets.handleEmpty(item.pageType || item.sectionKey),
        活动时间: mapperPresets.handleEmpty(
          getContentField(item, "activeTime")
        ),
        排序: mapperPresets.handleEmpty(item.sortOrder),
        状态: item.status === "active" ? "启用" : "禁用",
        是否推荐: getContentField(item, "isFeatured") ? "是" : "否",
        创建时间: mapperPresets.handleEmpty(item.createdTime || item.createdAt),
      });

      // 获取页面类型名称
      const tabName = getPageTypeName(tabKey);

      // 使用hooks进行导出
      await exportListData(
        fetchData,
        mapData,
        `${tabName}数据`,
        columnWidthPresets.activityContent || {
          ID: 80,
          标题: 200,
          副标题: 150,
          描述: 200,
          页面类型: 120,
          活动时间: 150,
          排序: 80,
          状态: 80,
          是否推荐: 80,
          创建时间: 150,
        },
        `活动中心-${tabName}数据`
      );
    };

    onMounted(() => {
      loadAllPageData();
    });

    return {
      loading,
      saving,
      activeTab,
      editDialogVisible,
      currentPageKey,
      currentPageTitle,
      isEditMode,
      editFormRef,
      searchText,
      statusFilter,
      pageData,
      editForm,
      editRules,
      defaultForm,
      uploadAction,
      videoUploadAction,
      uploadHeaders,
      videoUploading,
      dialogTitle,
      getPageList,
      getPageData,
      getContentField,
      loadAllPageData,
      getMockData,
      showAddDialog,
      getPageTypeName,
      editPageItem,
      deletePageItem,
      savePageContent,
      previewPage,
      handlePreview,
      handleCloseEditDialog,
      handleImageSuccess,
      handleVideoSuccess,
      beforeImageUpload,
      beforeVideoUpload,
      resetForm,
      handleSearch,
      handleFilter,
      previewImages,
      previewContent,
      stripHtml,
      exportTabData,
    };
  },
};
</script>

<style scoped>
.admin-activity-content {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.list-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
}

.list-header .header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-preview {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}

.content-preview:hover {
  color: #66b1ff;
}

.image-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.table-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  color: #909399;
  font-size: 12px;
}

.edit-dialog {
  max-width: 1200px;
}

.edit-content {
  max-height: 70vh;
  overflow-y: auto;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-uploader:hover {
  border-color: #409eff;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.image-preview-dialog) {
  max-width: 80vw;
}

:deep(.content-preview-dialog) {
  max-width: 60vw;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .list-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .list-header .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>
